<script>
import { CloseBold, Minus, FullScreen } from "@element-plus/icons-vue";
import { ElDescriptions, ElDescriptionsItem, ElButton } from 'element-plus'
export default {
  name: "information-pick",
  components: { ElDescriptions, ElDescriptionsItem, CloseBold, Minus, FullScreen, ElButton },
  data() {
    return {
      isMini: false,
      isMore: false,
    };
  },
  props: {
    isMiniProp: {
      type: Boolean,
      default: false
    },
    mainTitle: {
      type: [String, Number],
      default: ""
    },
    longitude: {
      type: [String, Number],
      default: ''
    },
    latitude: {
      type: [String, Number],
      default: ''
    },
    unid: {
      type: [String, Number],
      default: ''
    },
    simpleData: {
      type: Array,
      default() {
        return []
      }
    },
    additionData: {
      type: Array,
      default() {
        return []
      }
    },
  },
  computed: {
    listData() {
      return this.isMore ? this.simpleData.concat(this.additionData) : this.simpleData;
    }
  },
  watch: {
    // isMore(nV) {
    // },
    showComponent(nV) { },
  },
  mounted() {
    this.init();
  },
  beforeUnmount() {
  },
  methods: {
    close() {
      this.$emit('close', {
        unid: this.unid
      })
    },
    changeSize() {
      this.isMini = !this.isMini;
    },
    toggleMoreLess() {
      this.isMore = !this.isMore;
    },
    init() {
      this.isMini = this.isMiniProp
    }
  },
};
</script>

<template>
  <div class="information-normal" :class="[
    isMini ? 'is-mini' : ''
  ]">
    <header class="font-alimamashuheiti">
      <span>{{ mainTitle }}</span>
      <div class="funciton-area">
        <div class="icon-area hover-pointer" @click.stop="changeSize">
          <FullScreen v-if="isMini" />
          <Minus v-else />
        </div>
        <div class="icon-area hover-pointer" @click.stop="close">
          <CloseBold />
        </div>
      </div>
    </header>
    <main v-show="!isMini">
      <el-descriptions :column="2" title="" border>
        <el-descriptions-item v-for="(item, index) in listData" :key="index" :label="item.key">{{ item.value
          }}</el-descriptions-item>
      </el-descriptions>
      <div class="more-less">
        <el-button type="primary" @click="toggleMoreLess" link>{{ isMore ? '← 简略' : '详情 →' }}</el-button>
      </div>
    </main>
    <div class="popup-tip-container">
      <div class="popup-tip"></div>
    </div>
    <div class="ring-container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/2000/xlink"
        viewBox="0 0 25.6 25.6" style="background-color: transparent" width="100%" height="100%">
        <use href="#icon-aqua"></use>
      </svg>
    </div>
  </div>
</template>
<style lang="less" scoped>
@shadow-color: rgba(255, 255, 255, 0.2);

.information-normal {
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 0 .5rem @shadow-color;
  transition: width .3s;

  &.is-mini {
    width: auto;
  }

  &>header {
    color: #2168b2;
    padding: .5rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>span {
      font-size: 1.4rem;
      cursor: auto !important;
      padding-right: 1rem;
    }

    &>.funciton-area {
      display: inline-flex;

      &>.icon-area {
        width: 2rem;
        height: 2rem;
      }
    }
  }

  &>main {
    cursor: auto !important;
    padding: 1rem 1rem 0;

    &>.more-less {
      text-align: right;
      padding: .5rem;
    }

    &>.item {
      line-height: 1.8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      border-left: 5px solid transparent;
      color: #333;

      &:nth-child(even) {
        background-color: rgba(0, 91, 227, 0.1);
      }

      &:hover {
        background-color: rgba(0, 91, 227, 0.6);
        border-left: 5px solid rgba(0, 91, 227, 1);
        color: #fff;
      }

      & .key {
        font-size: 1.6rem;
      }

      & .value {
        padding-left: 1rem;
        font-size: 1.6rem;
        font-weight: bolder;
      }
    }
  }

  &>.popup-tip-container {
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -19px;
    content: "";
    width: 40px;
    height: 20px;
    pointer-events: none;
    overflow: hidden;

    &>.popup-tip {
      width: 20px;
      height: 20px;
      background-color: #fff;
      margin: -10px auto 0;
      transform: rotate(45deg);
      box-shadow: 0 0 5px @shadow-color;
    }
  }

  &>.ring-container {
    position: absolute;
    z-index: -1;
    bottom: -34px;
    left: 50%;
    margin-left: -19px;
    content: "";
    width: 40px;
    height: 40px;
    pointer-events: none;
    overflow: hidden;
  }
}
</style>
